// import MenuConfig from '../config'
import { useNavigate } from 'react-router-dom';
import * as Icon from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import { useEffect } from 'react';
const { Sider } = Layout;
// 3.拆分完成后，将左侧替换为动态菜单，需要配置， 前往config页面


// 定义一个动态获取icon
function iconToElement(name) {
    const IconElement = Icon[name];
    return <IconElement />
}


// 点击菜单跳转
// function selectMenu(e){
//     console.log(e,'eee'); //其中的 key属性 代表要跳转的路径
//     因为要使用到 useNavigate, 所以要定义到组件内部、 或者把这个方法写到组件内
// }
export default function Aside({ collapsed }) {
    const navigate = useNavigate()
    //  将方法写在组件内部
    function selectMenu(e) {
        console.log(e, 'eee'); //其中的 key属性 代表要跳转的路径
        navigate(e.key)
    }

    // 处理动态菜单
    let configList = JSON.parse(localStorage.getItem('userConfig'))
    // 基础菜单
    let MenuConfig = [
        {
            path: '/home',
            name: 'home',
            label: '首页',
            icon: 'HomeOutlined',
            url: '/home/index'
        },
        ...configList
    ]
    // 5.处理菜单的数据
    let items = MenuConfig.map((item) => {
        // 没有子菜单，就直接返回一个对象，带一个key
        const child = {
            key: item.path,
            // icon:iconToElement(item.icon),
            label: item.label
        }
        // 有子菜单
        if (item.children) {
            child.children = item.children.map((childItem) => {
                return {
                    key: childItem.path,
                    label: childItem.label
                }
            })
        }
        return child
    })


    
    return (
        // 10. 通过状态 改变菜单的收缩
        <Sider trigger={null} collapsed={collapsed}>
            <h3 className="app-name">{collapsed ? 'Water' : '沃特尔仓储管理系统'}</h3>
            <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={['1']}
                // 6.替换掉 默认的菜单配置
                items={items}
                style={{
                    height: '100%'
                }}
                // onClick={(e)=>{
                //     navigate(e.key)
                // }}
                onClick={selectMenu}
            />
        </Sider>
    )
}